<template>
  <div class="sys-message pad">
    <div class="head">
      <span>系统消息管理</span>
      <el-button @click="addSysMessage" type="primary" icon="el-icon-plus" circle></el-button>
    </div>
    <div class="search flex m-t-b">
      <el-input placeholder="消息标题" v-model="search" clearable @input="clearSearch" @keyup.enter.native="handleSearch" />
      <el-button @click="handleSearch" type="primary"><i class="el-icon-search"></i>搜索</el-button>
    </div>
    <el-table border class="m-t-b" stripe :data="messages" v-loading="loading">
      <el-table-column label="标题" prop="title">
      </el-table-column>
      <el-table-column label="内容" prop="content">
      </el-table-column>
      <el-table-column label="发送时间" prop="createDate">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="danger" icon="el-icon-delete" circle @click="deleteMessage(scope.row)"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="m-t-b flex"
      :page-size="pageSize"
      layout="prev, pager, next"
      :current-page="curPage"
      @current-change="handlePagi"
      :total="total">
    </el-pagination>
    <el-dialog title="添加系统消息" :visible.sync="showDialog">
      <el-form :model="message" :rules="rules" ref="message">
        <el-form-item prop="title" label="标题">
          <el-input v-model="message.title" />
        </el-form-item>
        <el-form-item prop="message" label="内容">
          <el-input type="textarea" @keyup.enter.native="addMessage('message')" rows="3" v-model="message.message" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showDialog = false">取 消</el-button>
        <el-button type="primary" @click="addMessage('message')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { addSysMessage, getSysMessage,deleteSysMessage } from '../api'
import { formatDate } from '../util'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

export default {
  name: 'sys_message',
  data () {
    return {
      search: '',
      showDialog: false,
      loading: true,
      pageSize: 10,
      curPage: 1,
      total: 0,
      message: {
        title: '',
        message: ''
      },
      messages: [],
      rules: {
        title: [
          { required: true, message: '请填写标题', trigger: 'blur' },
          { min: 5, max: 20, message: '长度为 5 到 20 个字符', trigger: 'blur' }
        ],
        message: [
          { required: true, message: '请填写消息内容', trigger: 'blur' },
          { min: 5, max: 100, message: '长度为 5 到 100 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    addSysMessage () {
      if (!this.$checkAuth('canAddSystemMessage')) {
        return this.$message.error('暂无对应操作权限!')
      };
      this.showDialog = true
    },
    deleteMessage (row) { // 删除系统消息
      if (!this.$checkAuth('canDeleteSystemMessage')) {
        return this.$message.error('暂无对应操作权限!')
      };
      this.$confirm('此操作将永久删除该条消息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log(row.systemInfoId)
        deleteSysMessage(row.systemInfoId)
        .then(res => {
          if (res.data.code === 1) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.fetchSysMessage(1)
          } else {
            this.$message.error(res.data.msg || '网络异常!')
          }})
          .catch(e => {
            this.$message.error('网络异常!')
          })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      });
    },
    addMessage (form) {
      this.$refs[form].validate(valid => {
        if (valid) {
          addSysMessage({
            title: this.message.title,
            content: this.message.message
          })
          .then(res => {
            if (res.data.code === 1) {
              this.$message({
                type: 'success',
                message: '操作成功!'
              })
              this.showDialog = false
              this.fetchSysMessage(1)
            } else {
              this.$message.error(res.data.msg || '网络异常!')
            }
          })
          .catch(e => {
            this.$message.error('网络异常!')
          })
        }
        return false
      })
    },
    handleSearch () {
      if (!this.$checkAuth('canSearchSystemMessage')) {
        return this.$message.error('暂无对应操作权限!')
      };
      if (!this.search.trim()) {
        return this.$message.error('请输入搜索内容')
      }
      NProgress.start()
      this.fetchSysMessage(1, this.search)
      NProgress.done()
    },
    handlePagi (page) {
      if (this.search.trim()) {
        this.fetchSysMessage(page, this.search)
      } else {
        this.fetchSysMessage(page) 
      }
    },
    test (e) {
      console.log(e)
    },
    fetchSysMessage (index, title) {
      this.loading = true
      title = title || null
      getSysMessage({
        index,
        count: this.pageSize,
        queryParam: {
            title
        }
      })
      .then(res => {
        if (res.data.code === 1) {
          this.total = res.data.data.totalRecord
          let list = res.data.data.list || []
          for (let i = 0; i < list.length; i ++) {
            list[i].createDate = formatDate(list[i].createDate, 'ZH')
          }
          this.messages = list
        } else {
          this.$message.error('网络异常!')
        };
        this.loading = false
      })
      .catch(e => {
        this.$message.error('网络异常!');
        this.loading = false
      })
    },
    clearSearch () {
      if (!this.search) {
        this.fetchSysMessage(1)
      }
    }
  },
  created () {
    this.fetchSysMessage(1)
  }
}
</script>
<style lang="scss">
  .sys-message {
    table {
      .cell {
        text-align: center;
      }
    }
  }
</style>
